<template>
	<view class="container">
		<scroll-view scroll-x class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item"
				:class="tabCurrentIndex === index ? `text-${themeColor.name} current` : ''" @tap="tabClick(index)">
				{{ item.text }}
			</view>
		</scroll-view>
		<view class="input-content" v-if="tabCurrentIndex =='0'">

			<view class="input-tit">
				<text>帐号余额：￥{{storeInfo.commission}}</text>
			</view>
			<view class="input-tit">
				<text>应付采购金额：￥{{price}}</text>
				
			</view>
			<view class="flexc copys">
				<!-- <radio @tap="getChecked" :checked="checked ? true : false" style="transform:scale(0.7)"></radio> -->
				<text @tap="checked=!checked;" class="iconfont iconxuanzhong2"
					:style="checked ? 'color:#fa436a' : ''"></text>
				<text>我已阅读并同意</text>
				<text class="blue" @tap="navTo('news/tips?type=4')">《供货协议》</text>
			</view>
			<button class="confirm-btn" :class="'bg-' + themeColor.name" @tap="toOnSubmit">
				确认付款
				
			</button>

			
			
		</view>

		<view class="input-content" v-if="tabCurrentIndex =='1'">

			<view class="input-tit">
				<text>上传付款截图</text>
			</view>

			<!--上传图片-->
			<view class="flexs upload-box">
				<view class="flexc column upload" @tap="uploadImage(1)">
					<text v-if="!cardUrl1" class="span">+</text>
					<image v-if="cardUrl1" :src="cardUrl1"></image>
				</view>
			</view>

			<view class="flexc copys">
				<!-- <radio @tap="getChecked" :checked="checked ? true : false" style="transform:scale(0.7)"></radio> -->
				<text @tap="checked=!checked;" class="iconfont iconxuanzhong2"
					:style="checked ? 'color:#fa436a' : ''"></text>
				<text>我已阅读并同意</text>
				<text class="blue" @tap="navTo('news/tips?type=4')">《供货协议》</text>
			</view>
			<button class="confirm-btn" :class="'bg-' + themeColor.name" @tap="toSubmit">
				确认上传
			</button>
		</view>
		<u-keyboard @change="onChange" ref="uKeyboard" v-model="showKeyboard" @backspace="onBackspace" mode="number"
			:dot-enabled="false" :tooltip="false" default="">
			<view style="text-align: center;">
				请输入支付密码
			</view>
			<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password" :disabled-keyboard="true"
				@finish="finish"></u-message-input>
		</u-keyboard>
		<view class="tips-bot" style="padding: 0 0 10px 10px;">
			<text style="color:#f00;">注：</text>
			<text style="color:#999;">线下付款：自已与门店联系转采购款，线上付款：将自已帐号里的余额直接转到门店帐上！</text>
		</view>
	</view>
</template>
<script>
	import {
		uploadImage
	} from '@/api/userInfo';
	import {
		memberInfo
	} from '@/api/userInfo';
	let timer = null;
	import uKeyboard from "uview-ui/components/u-keyboard/u-keyboard.vue";
	import uMessageInput from "uview-ui/components/u-message-input/u-message-input.vue";
	export default {
		components: {
			uMessageInput,uKeyboard
		},
		data() {
			return {
				info: {},
				profileInfo: {},
				tabCurrentIndex: 0,
				imageList: [],
				storeInfo: {
					commission: 0
				},
				desc: '碎屏宝说明',
				cardUrl1: '',
				cardUrl2: '',
				index: '0',
				orderId: null,
				price: 0,
				signImage: '',
				firstCount:'0',
				showKeyboard: false,
				password: '', //输入的密码
				checked: false,
				navList: [{
						text: '线上付款'
					},
					{
						text: '线下付款'
					},
				]
			}
		},
		onLoad(e) {
			this.orderId = e.id;
			this.price = e.price;
		},
		onShow() {
			this.getStoreInfo();
		},
		methods: {
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			getStoreInfo() {
				this.$http.get(memberInfo).then(async res => {
					this.loading = false;
					let storeId = res.storeId;
					this.storeId = storeId + '';
					this.$http.get('/store/TStoreInfo/querystoreinfo?storeId=' + storeId).then(r => {

						this.storeInfo = r || {};

					});
				}).catch(() => {

					this.loading = false;
				});
			},
			getResult(id) {
				let self = this;
				this.$http.get('/sign?orderId=' + id).then(res => {
					if (res) {
						clearInterval(timer)
						uni.hideLoading();
						self.toSubmit2();
					}
				})
			},
			onChange(val) {
				console.log('---val:',val)
				if (this.password.length < 6) {
					this.password += val;
				}

				if (this.password.length >= 6) {
					this.finish(); //封装的结束函数，我是在后续还有请求接口和判断等
				}
			},
			buy() {
				this.showKeyboard = true;
				this.password = ''; //唤醒输入组件时清空密码
			},
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			finish() {
				this.firstCount = '1';
				this.showKeyboard = false;
				//可以放请求的接口及付款后的判断等
				this.$http
					.get(`/paystoreApply`, {
						orderId: this.orderId,
						payimg: this.cardUrl1,
						opt: '0',
						paypassword:this.password
					})
					.then(async r => {
						this.$mHelper.toast('付款成功!');
						setTimeout(() => {
							uni.navigateBack();
						}, 1500)
					})
					.catch(() => {
						
						setTimeout(() => {
							uni.navigateBack();
						}, 1500)
					});
			},
			toSubmit() {
				if (!this.cardUrl1) {
					this.$mHelper.toast('请上传付款截图');
					return false
				}
				if (!this.checked) {
					this.$mHelper.toast('请阅读并同意《供货协议》');
					return false
				}
				this.$http
					.get(`/paystoreApply`, {
						orderId: this.orderId,
						payimg: this.cardUrl1,
						opt: '1'
					})
					.then(() => {
						this.$mHelper.toast('上传成功!');
						setTimeout(() => {
							uni.navigateBack();
						}, 1500)
					})
					.catch(() => {

					});
			},
			toOnSubmit() {
				if (!this.checked) {
					this.$mHelper.toast('请阅读并同意《供货协议》');
					return false
				}
				if(this.firstCount!='0'){
					this.$mHelper.toast('订单已发起一次支付，请退出付款页面重新在点支付采购款！');
					return false
				}
				
				this.showKeyboard = true;
				this.password = ''; //唤醒输入组件时清空密码
				
			},
			toSubmit2() {
				// this.$http
				// 	.get(`/sign`, {
				// 		orderId: this.orderId,
				// 		signImage: this.cardUrl1
				// 	})
				// 	.then(() => {
				// 		this.$mHelper.toast('签收成功!');
				// 		setTimeout(()=>{
				// 			uni.navigateBack();
				// 		}, 1500)
				// 	})
				// 	.catch(() => {

				// 	});
				this.$http
					.get(`/signCertid`, {
						orderId: this.orderId
					})
					.then(() => {
						this.$mHelper.toast('签收成功!');
						setTimeout(() => {
							uni.navigateBack();
						}, 1500)
					})
					.catch(() => {

					});
			},
			// 删除已选中图片
			close(e, index) {
				this.imageList[index].splice(e, 1);
			},
			// 监听图片上传
			uploadImage(index) {
				// 从相册选择6张图
				const _this = this;
				uni.chooseImage({
					count: 6,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: async function(res) {
						await _this.handleUploadFile(res.tempFilePaths, index);
					}
				});
			},
			// 依次上传图片
			async handleUploadFile(data, index) {
				data.forEach(item => {
					this.$http
						.upload(uploadImage, {
							filePath: item,
							image: 'file'
						})
						.then(async r => {
							if (index == 1) {
								this.cardUrl1 = r;
							} else {
								this.cardUrl2 = r;
							}
						});
				});
			},
			goBack() {
				uni.navigateBack()
			},
			navTo(url) {
				uni.navigateTo({
					url: '/pages/' + url
				})
			}
		}
	}
</script>
<style lang='scss'>
	page {
		background-color: $color-white;
	}

	.upload-box {
		.upload {
			width: 100%;
			height: 400rpx;
			background-color: $page-color-light;
			border-radius: 10rpx;
			font-size: 28rpx;
			color: #999;
			line-height: 150%;

			.span {
				font-size: 60rpx;
			}
		}
	}

	.copys {
		margin-top: 200rpx;
	}

	.confirm-btn {
		margin-top: 50rpx;
	}

	.input-content {
		padding: 20upx 30upx;

		.input-tit {
			font-size: $font-base + 2upx;
			font-weight: 600;
			margin-bottom: 30rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 20rpx;
			}
		}

		.input-item {
			display: flex;
			padding: 0 30upx;
			background: $page-color-light;
			height: 80upx;
			line-height: 80upx;
			border-radius: 4px;
			margin-bottom: 30upx;
			position: relative;

			.pick {
				width: 100%;
				height: 80rpx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 100;

				.uni-input {
					width: 100%;
					height: 80rpx;
				}
			}

			&:last-child {
				margin-bottom: 0;
			}

			.tit {
				width: 120upx;
				font-size: $font-sm + 2upx;
				color: $font-color-base;
				font-weight: bold;
			}

			.tit2 {
				min-width: 120rpx;
				width: auto;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}

			input {
				width: calc(100% - 100upx);
				height: 80upx;
				line-height: 80upx;
				font-size: $font-sm + 2upx;
				color: $font-color-dark;
			}

			.span {
				flex: 1;
				font-size: $font-sm + 2upx;
				color: $font-color-dark;
			}

			.cell-icon {
				color: #666;
			}

			.date {
				height: 80upx;
				line-height: 80upx;
				font-size: $font-base + 2upx;
				color: $font-color-dark;
			}

			.gender-item {
				margin-right: 20upx;

				.gender-item-text {
					padding-left: 10upx;
				}

				radio .wx-radio-input.wx-radio-input-checked {
					background: $uni-color-primary;
					border-color: $uni-color-primary;
				}
			}
		}
	}

	.navbar {
		display: block;
		white-space: nowrap;

		.nav-item {
			display: inline-block;
			margin: 0 20rpx;
			line-height: 70rpx;
		}
	}
</style>